// 获取页面元素
const form = document.querySelector("form");
let area = document.getElementById("area");
let price = document.getElementById("price");
let ratio = document.getElementById("ratio");
let years = document.getElementById("years");
const resultDiv = document.getElementById("result");
console.log(area);

// 监听表单提交事件
form.addEventListener("submit", function(event) {
    // 阻止表单默认提交行为

    event.preventDefault();

    // 思考：获取到的值需要先做数据转换吗？

    area = +area.value
    price = +price.value
    ratio = +ratio.value
    years = +years.value

    // 计算房屋总价、首付款、贷款金额、月供
    // 房屋总价公式 ： 房屋面积 * 房屋单价
    let allMoney = area * price
        // 首付款公式： 总价 * （1 - 按揭成数 / 10）
    let first = allMoney * (1 - ratio / 10)
        // 贷款金额： 总价 * （按揭成数 / 10）
    let loan = allMoney * (ratio / 10)
        // 月供：贷款金额 / 总月数
    let Month = allMoney / (years * 12)

    // 显示结果
    // 填入对应的结构
    resultDiv.innerHTML = `
    <div id="result">
        <p>房屋总价：${allMoney}元</p>
        <p>首付款：${first}元</p>
        <p>贷款金额：${loan}元</p>
        <p>贷款年限：${years}年</p>
        <p>贷款月数：${years*12}个月</p>
        <p>月供：${Month}元/月</p>
      </div>`;
});